<template>
  <div class="pagePersonalCenter">
      <headerT title='个人中心'  :isShowBack="false"/>
    <div class="pageNormalBackground pagesMain" style="height:100vh">
      <div class="everyBlockBgcolor everyBlockPadding headHight">
        <div class="personHead">
          <div class="qiandao" @click="getSign">
            <img src="../../../static/images/qiandao.png" alt="" />

            <p>签到</p>
          </div>
          <div class="userInfo">
            <img class="userImg" v-if="userInfo.img!=null" :src="userInfo.img" />
            <img class="userImg" v-if="userInfo.img==null" src="../../../static/images/userImg.png" alt="" />
            <div class="userName">
              <p class="userNickname">{{userInfo.nickname}}</p>
              <p class="userTel">{{userInfo.phone}}</p>
            </div>
          </div>
        </div>
        <div class="moreUser" @click="toBecomeVip">
          <div class="moreYh">
            <img src="../../../static/images/yh.png" alt="" />
            <p>享受更多优惠</p>
          </div>
          <div class="becomeVip">
            <p>成为会员</p>
            <img src="../../../static/images/jiantou_right.png" alt="" />
          </div>
        </div>

        <div class="personMenu">
          <div class="tab" @click="toOrder(2)">
            <img src="../../../static/images/forPay.png" alt="" />
            <p>待付款</p>
          </div>
          <div class="tab" @click="toOrder(3)">
            <img src="../../../static/images/forUse.png" alt="" />
            <p>待使用</p>
          </div>
          <div class="tab" @click="toOrder(4)">
            <img src="../../../static/images/finished.png" alt="" />
            <p>已完成</p>
          </div>
          <div class="tab" @click="toOrder(1)">
            <img src="../../../static/images/allOrder.png" alt="" />
            <p>全部订单</p>
          </div>
        </div>
      </div>
      <div class="everyBlockBgcolor active">
        <!-- <img src="/static/images/person-active.png" /> -->
      </div>
      <div class="everyBlockBgcolor displayFlex backNav firstBackNav" @click="toMyYuyue">
        <div class="displayFlex">
          <img src="../../../static/images/myOrderNo.png" alt="" />
          <p>我的预约</p>
        </div>
        <img src="../../../static/images/jiantou_gray.png" alt="" />
      </div>
      <div class="everyBlockBgcolor displayFlex backNav" @click="toMyWallet">
        <div class="displayFlex">
          <img src="../../../static/images/myWalletNo.png" alt="" />
          <p>我的钱包</p>
        </div>
        <img src="../../../static/images/jiantou_gray.png" alt="" />
      </div>
      <div class="everyBlockBgcolor displayFlex backNav" @click="toMyMessage">
        <div class="displayFlex">
          <img src="../../../static/images/myMessageNo.png" alt="" />
          <p>我的消息</p>
        </div>
        <img src="../../../static/images/jiantou_gray.png" alt="" />
      </div>
      <div class="everyBlockBgcolor displayFlex backNav" @click="toZhanghao">
        <div class="displayFlex">
          <img src="../../../static/images/accountSecurityNo.png" alt="" />
          <p>账号安全</p>
        </div>
        <img src="../../../static/images/jiantou_gray.png" alt="" />
      </div>
      <div class="everyBlockBgcolor displayFlex backNav" @click="toEditPerson">
        <div class="displayFlex">
          <img src="../../../static/images/editPersonNo.png" alt="" />
          <p>个人资料</p>
        </div>
        <img src="../../../static/images/jiantou_gray.png" alt="" />
      </div>

      <div class="everyBlockBgcolor displayFlex backNav" @click="toMyFootprint">
        <div class="displayFlex">
          <img src="../../../static/images/myFootprintNo.png" alt="" />
          <p>我的足迹</p>
        </div>
        <img src="../../../static/images/jiantou_gray.png" alt="" />
      </div>
      <div class="everyBlockBgcolor displayFlex backNav exit">
        <div class="displayFlex">
          <img src="../../../static/images/Exit.png" alt="" />
          <p>退出登录</p>
        </div>
      </div>
    </div>
    <tabcard />
  </div>
</template>

<script>
import headerT from "@/components/header";
import tabcard from "@/components/tabCard";
import {userInfo,userSign} from '@/services/personCenter'
export default {
  name: "个人中心",
  components: {
    tabcard,
    headerT
  },

  data() {
    return {
      userInfo:{},//个人信息
    };
  },

  created(){
    },
  mounted(){
    this.getUserInfo()
  },
  methods: {
    getSign() {//签到
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(userSign)
        .then(res => {
          this.$vux.loading.hide();
          if (res.code == 200) {
            this.$vux.toast.show({
              text: res.message,
              position: "top",
              type: "text"
            });
          }
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    getUserInfo(){//获取用户信息
      this.$post(userInfo).then(res => {
          if(res.code==200 && res.data!=null){
            this.userInfo=res.data
          }
      })
    },
      toBecomeVip(){//前往会员中心
          this.$tools.goPage('/vipCenter')
      },
      toOrder(num){//前往订单页
          // this.$tools.goPage('/myOrder')
          this.$tools.goPage_query('/myOrder',{orderTypeNum:num})
      },
      toMyMessage(){//前往我的消息页
          this.$tools.goPage('/message')
      },
      toMyYuyue(){//前往我的预约
          this.$tools.goPage('/myYuyue')
      },
      toMyWallet(){//前往我的钱包
          this.$tools.goPage('/myWallet')
      },
      toZhanghao(){//前往账号安全
        this.$tools.goPage('/seeZh')
      },
      toEditPerson(){//前往编辑个人信息页面
        this.$tools.goPage('/editPerson')
      },
      toMyFootprint(){//前往我的足迹页面
        this.$tools.goPage('/myFootprint')
      },
  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css">
.everyBlockMargin {
  margin: 0.2rem 0.34rem;
}
.displayFlex {
  display: flex;
  align-items: center;
}

.pagePersonalCenter {
  .headHight {
    margin-top: 1.2rem;
    padding-bottom: 0.26rem;
    .personHead {
      .qiandao {
        width: 2.12rem;
        height: 0.89rem;
        position: fixed;
        right: 0;
        top: 2rem;
        background-image: url("../../../static/images/members_city_bg.png");
        background-size: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 0.28rem;
        img {
          width: 0.54rem;
          height: 0.6rem;
          margin-right: 0.1rem;
        }
      }

      .userInfo {
        display: flex;
        align-items: center;
        padding-top: 0.46rem;
        .userImg {
          display: block;
          width: 1.72rem;
          height: 1.72rem;
          border-radius: 50%;
        }
        .userName {
          margin-left: 0.26rem;

          .userNickname {
            font-size: 0.44rem;
            font-weight: bold;
            line-height: 0.6rem;
            color: rgba(78, 78, 78, 1);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            word-break: break-all;
          }
          .userTel {
            font-size: 0.3rem;
            color: #9f9f9f;
          }
        }
      }
    }
    .moreUser {
      // width: 6.96rem;
      height: 1.13rem;
      margin: 0.71rem 0;
      padding: 0px 16px;
      background-image: url("../../../static/images/jux.png");
      background-size: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 0.92rem;
      font-size: 0.32rem;
      .moreYh {
        display: flex;
        align-items: center;
        color: #a56f3f;

        img {
          width: 0.91rem;
          height: 0.81rem;
        }
      }
      .becomeVip {
        display: flex;
        align-items: center;
        color: #a56f3f;

        img {
          width: 0.13rem;
          height: 0.21rem;
          margin-left: 0.15rem;
        }
      }
    }

    .personMenu {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 0.23rem;
      .tab {
        font-size: 0.3rem;
        color: #4e4e4e;
        margin: 0 0.5rem;
        img {
          width: 1.14rem;
          height: 0.98rem;
        }
      }
    }
  }
  .active {
    width: 100%;
    height: 2.65rem;
    box-sizing: border-box;
    background-image: url('/static/images/person-active.png');
    background-size:100%;

  }
  .backNav {
    height: 1.7rem;
    justify-content: space-between;
    padding: 0 0.39rem;
    font-size: 0.37rem;
    font-weight: bold;
    color: #4e4e4e;
    margin: 0.25rem 0.32rem;
    .displayFlex {
      img {
        width: 0.79rem;
        height: 0.79rem;
        margin-right: 0.1rem;
      }
    }

    img {
      width: 0.17rem;
      height: 0.33rem;
    }
  }
  .firstBackNav{
    margin: 0rem 0.32rem ;
  }
  .exit {
    color: #f64135;
    margin-bottom: 1.6rem;
  }

}
</style>
